<template>
  <div class="monitor-box">
    <div class="flex-c">
        <div class="echarts-box flex-c">
            <gagueItem etitle="CPU使用率" style="margin-right: 30px;"></gagueItem>
            <gagueItem etitle="内存使用率"></gagueItem>
        </div>
        <div class="ipos flex-c">
            <img class="img" :src="img">
            <div>
                <div class="name">IOPS</div>
                <div class="value">1,234counts/s</div>
            </div>
        </div>
    </div>
    <div class="y-box">
        <div class="base-box" v-for="(item,index) in dataList" :key="item.name+index">
            <div class="data-item flex-c">
                <img class="img" :src="img">
                <div>
                    <div class="name">{{ item.name }}</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import gagueItem from './gaugeItem.vue';
export default {
    components:{gagueItem},
    data(){
        return{
            img:require('@/assets/img/harddisc.png'),
            dataList:[
                {name:'网络输入吞吐量',value:'1,234bytes/s'},
                {name:'网络输入吞吐量',value:'1,234bytes/s'},
                {name:'数据库总连接数',value:'1,234counts'},
                {name:'当前活跃连接数',value:'1,234counts'},
            ]
        }
    }

}
</script>

<style lang="less" scoped>
.monitor-box{
    padding-left: 15px;
    margin-top: 20px;
    .echarts-box{
        width: 350px;
        height: 120px;
    }
    .ipos{
        width: 359px;
        height: 120px;
        border: 1px #e9e9e9 solid;
        .img{
            width: 50px;
            height: 56px;
            margin: 0 10px 0 30px;
        }
            .name{
                color: #0000006d;
                font-size: 14px;
                margin-bottom: 10px;
            }
            .value{
                color: #000000d8;
                font-size: 30px;
            }
    }
    .y-box{
        margin-top: 40px;
        display: flex;
        flex-flow: row wrap;

        .base-box{
            margin-bottom: 20px;
            width: 50%;
            .data-item{
                width: 349px;
                height: 102px;
                border: 1px #e9e9e9 solid;
                .img{
                    width: 75px;
                    height: 56px;
                    margin: 30px;
                }
                .name{
                    color: #0000006d;
                    font-size: 14px;
                    margin-bottom: 13px;
                }
                .value{
                    color: #000000d8;
                    font-size: 20px;
                }
            }
        }
    }
}

</style>